<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>配置权限</title>
 	<%@include file="/jsp/public/header.jsp" %>
 	<!-- 1，引入js文件与css文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery_treeview/jquery.treeview.js"></script>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/script/jquery_treeview/jquery.treeview.css">
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/file.css" />
	<script type="text/javascript">
		$(function(){
			//为所有的复选框绑定单击事件
			$('input[name=privilegeIds]').click(function(){
				//当选中某个权限时，同时选中其下级权限，当取消某个权限时，同时取消其下级权限
				$(this).siblings('ul').find('input').attr('checked',this.checked);

				//当选中某个权限时，同时选中其直接上级权限
				if(this.checked){
					$(this).parents('li').children('input').attr('checked',true);
				}else{
					//当取消某个权限时，如果同级权限都没有选中，则取消其上级权限
					var size = $(this).parent('li').siblings('li').children('input:checked').size();
					if(size == 0){
						$(this).parent().parent().siblings('input').attr('checked',false);
					}
				}
			});
		});
	</script>
</head>
<body>

<!-- 标题显示 -->
<div id="Title_bar">
    <div id="Title_bar_Head">
        <div id="Title_Head"></div>
        <div id="Title"><!--页面标题-->
            <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 配置权限
        </div>
        <div id="Title_End"></div>
    </div>
</div>

<!--显示表单内容-->
<div id=MainArea>
    <form action="setPrivilege.do" method="post">
		<input type="hidden" name="rid" value="${role.rid}">
        <div class="ItemBlock_Title1"><!-- 信息说明 --><div class="ItemBlock_Title1">
        	<img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" /> 正在为【${role.name }】配置权限 </div>
        </div>
        
        <!-- 表单内容显示 -->
        <div class="ItemBlockBorder">
            <div class="ItemBlock">
                <table cellpadding="0" cellspacing="0" class="mainForm">
					<!--表头-->
					<thead>
						<tr align="LEFT" valign="MIDDLE" id="TableTitle">
							<td width="300px" style="padding-left: 7px;">
								<!-- 如果把全选元素的id指定为selectAll，并且有函数selectAll()，就会有错。因为有一种用法：可以直接用id引用元素 -->
								<input type="CHECKBOX" id="cbSelectAll" onclick="$('input[name=privilegeIds]').attr('checked',this.checked)"/>
								<label for="cbSelectAll">全选</label>
							</td>
						</tr>
					</thead>
                   
			   		<!--显示数据列表-->
					<tbody id="TableData">
						<tr class="TableDetail1">
							<!-- 显示权限树 -->
							<td>
								<%---
								<s:checkboxlist name="privilegeIds" list="privilegeList" listKey="id" listValue="name">
								</s:checkboxlist>
								 <s:iterator value="privilegeList">
								 <input 
								 	<s:property value="id in privilegeIds ? 'checked' : '' "/>
								 	value="${id }" type="checkbox" name="privilegeIds">${name }
								 <br/>
								 </s:iterator>
								 --%>
								 
								 <ul id="privilegeTree">
									 <c:forEach items="${privilegeList}" var="p">
									 	<li>
									 		 <input id="cb_${p.pid }"
													 <c:forEach items="${privilegeIds}" var="pid">
															<c:if test="${pid==p.pid}">checked</c:if>
													 </c:forEach>
								 					value="${p.pid }" type="checkbox" name="privilegeIds">
								 					<label for='cb_${p.pid }'><span class='folder' id='${p.pid }'>${p.name }</span></label>
								 					
								 					<ul>
								 						<c:forEach items="${p.children}" var="p2">
								 							<li>
								 								<input id="cb_${p2.pid }"
																		<c:forEach items="${privilegeIds}" var="pid">
																			   <c:if test="${pid==p2.pid}">checked</c:if>
																		</c:forEach>
								 										value="${p2.pid }" type="checkbox" name="privilegeIds">
								 										<label for='cb_${p2.pid }'><span class='folder' id='${p2.pid }'>${p2.name }</span></label>
								 								<ul>
								 									<c:forEach items="${p2.children}" var="p3">
								 										<li>
								 											<input id="cb_${p3.pid }"
																					<c:forEach items="${privilegeIds}" var="pid">
																						<c:if test="${pid==p3.pid}">checked</c:if>
																					</c:forEach>
								 													value="${p3.pid }" type="checkbox" name="privilegeIds">
								 													<label for='cb_${p3.pid }'><span class='folder' id='${p3.pid }'>${p3.name }</span></label>
								 										</li>
								 									</c:forEach>
								 								</ul>
								 								
								 							</li>
								 						</c:forEach>
								 					</ul>
									 	</li>
									 </c:forEach>
								 </ul>
							</td>
						</tr>
					</tbody>
                </table>
            </div>
        </div>
        
        <!-- 表单操作 -->
        <div id="InputDetailBar">
            <input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/>
            <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a>
        </div>
    </form>
</div>

<div class="Description">
	说明：<br />
	1，选中一个权限时：<br />
	&nbsp;&nbsp;&nbsp;&nbsp; a，应该选中 他的所有直系上级。<br />
	&nbsp;&nbsp;&nbsp;&nbsp; b，应该选中他的所有直系下级。<br />
	2，取消选择一个权限时：<br />
	&nbsp;&nbsp;&nbsp;&nbsp; a，应该取消选择 他的所有直系下级。<br />
	&nbsp;&nbsp;&nbsp;&nbsp; b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并递归向上做这个操作。<br />

	3，全选/取消全选。<br />
	4，默认选中当前岗位已有的权限。<br />
</div>
<script type="text/javascript">
	$("#privilegeTree").treeview();
</script>
</body>
</html>
